<!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>精通CSS与HTML设计模式 | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






<div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
<div class="container">
  <h2 class="subtitle is-6">June 21, 2016</h2>
  <h1 class="subtitle is-size-4-mobile is-size-3-desktop">精通CSS与HTML设计模式</h1>
  <div class="content">
    

<h2 id="2014-12-22">2014-12-22</h2>

<h3 id="第一章-轻松搞定css">第一章：轻松搞定CSS</h3>

<ul>
<li><p>设计模式&ndash;精心组织的解决方案</p>

<ul>
<li>常用功能的组合</li>
<li>模式的名字，要解决的问题，解决方案和各方面的权衡。</li>
</ul></li>

<li><h4 id="1-2-使用设计模式">1.2 使用设计模式</h4>

<ul>
<li>通过把45种常见的CSs属性与4种元素（内联，内联块状，块状和表格）和5种定位方法（静态，相对，绝对，固定，浮动）结合创建。</li>
<li>强大威力：很容易利用基础的模式并将它们组合来构造出更加复杂的模式。</li>
<li>background：CSS内建的设计模式。</li>
<li>绝对定位(absolute)：相对另外一个元素从新定位。</li>
<li>文本替换（Text Replacement）：文本藏在图片的后面。这样一来，图片下载失败，可以显示文字。</li>
<li>左外边距（Left Marginal）：个或多个元素移出块状元素。可以使标题放在左边，内容放在右边。</li>
<li>外边距图片字母下沉（Marginal Graphic Dropcap）：块状元素的左边距里创建一个图形化的首字母下沉，集文本替换和左外边距模式之大成。</li>
</ul></li>

<li><h4 id="1-3-引用样式表">1.3 引用样式表</h4>

<ul>
<li>在<code>head</code>区域使用<code>link</code>元素的<code>href</code>属性。</li>
</ul></li>

<li><h4 id="1-4-css语法">1.4 CSS语法</h4>

<ul>
<li>CSS代码应当小写（属性和值不区分大小写）。</li>
<li>常量值不用引号</li>
<li>分号用来终止CSS规则和Import语句。</li>
<li>CSS注释  <code>/*  CSS  */</code></li>
</ul></li>

<li><h4 id="1-5-使用层叠排序">1.5 使用层叠排序</h4>

<ul>
<li>规则划分为6组(高优先级会覆盖低优先级规则 高-&gt;低)

<ul>
<li>1.使用 <code>！important</code>  规则群组拥有最高优先级。</li>
<li>2.第二优先级：嵌套在 <code>style</code> 中的样式。由于不便于维护，不建议使用。</li>
<li>3.拥有一个或多个 <code>id</code> 选选择符的规则。</li>
<li>4.拥有一个或多个类，属性，或伪类选择符的规则。</li>
<li>5.拥有一个或多个元素选择符的规则。</li>
<li>6.统配选择符。 e.g. <code>*{border:opx}</code></li>
</ul></li>
<li>位于同一选择符群组并且拥有同样的等级和数量。优先级会按照位置来排。6种位置群组排列顺序（高-&gt;低）

<ul>
<li>1.在HTML文档头部中的 <code>&lt;style&gt;</code> 元素。会覆盖@import导入的属性。</li>
<li>2.<code>&lt;style&gt;</code> 元素中<code>@import</code> 引入的规则要高于 <code>link</code> 引入的规则。</li>
<li>3.通过 <code>link</code> 元素链接的样式表。</li>
<li>4.通过 <code>link</code> 链接的样式表中通过 <code>@import</code> 语句引入的样式表。</li>
<li>5.终端用户绑定的样式表。</li>
<li>6.浏览器所提供的默认样式表。</li>
</ul></li>
</ul></li>

<li><h4 id="1-6-简化层叠">1.6 简化层叠</h4>

<ul>
<li>为了保持叠层尽可能简单，把绑定的样式最小化，但是不使用 <code>@import</code> 语句。</li>
<li>避免使用 <code>!important</code>。</li>
<li>对每个选择符进行排序。

<ul>
<li>层叠顺序</li>
<li><code>通配选择符</code></li>
<li><code>元素选择符</code></li>
<li><code>类，属性和伪类选择符</code></li>
<li><code>ID选择符</code></li>
<li><code>！important 通赔选择符</code></li>
<li><code>!important 元素选择符</code></li>
<li><code>!important 类，属性和伪类选择符</code></li>
<li><code>！important ID选择符</code></li>
</ul></li>
</ul></li>

<li><h4 id="1-14-变量的度量单位">1.14 变量的度量单位</h4>

<ul>
<li><code>em</code>：赋值给元素的font-size。在font-size这种情况下，是赋值给它的父类。例如，5em是指5倍的font-size。要把元素相对其文本来设置时，是文档布局依据你的文本大小而伸缩。</li>
<li><code>ex</code>：指元素的当前字体中字母x的高度，与em是相关的，很少使用它。</li>
</ul></li>

<li><h4 id="1-15-固定的度量单位">1.15 固定的度量单位</h4>

<ul>
<li><code>in</code>：逻辑上的英尺。</li>
<li><code>px</code>：像素。对图片定位时很有用，图片是以像素为单位度量的。</li>
<li><code>pt</code>：点。1/72 in</li>
<li><code>pc</code>：指派卡。</li>
<li><code>cm</code>：逻辑厘米。</li>
<li><code>mm</code>：毫米。</li>
</ul></li>

<li><h4 id="1-19-使样式表规范化">1.19 使样式表规范化</h4>

<ul>
<li>载入你的页面将有多块。

<ul>
<li>寻找你的文件 延时0.1-0.5秒。宽带连接阶段。</li>
<li>为了提高性能，浏览器把文件放在缓存里。</li>
<li>当缓存的文件到期了，浏览器会询问那个服务器文件是否更改。</li>
<li>文件没有到期，即使文件做了修改，浏览器也不会跟新。</li>
</ul></li>
</ul></li>
</ul>

<h2 id="2014-12-23">2014-12-23</h2>

<h3 id="第二章-html设计模式">第二章：HTML设计模式</h3>

<pre><code>- 如何结构化和语义化的使用元素。
- 在设计模式中主要有4种元素：结构化块状元素，终端块状元素，多目标块状元素和内联元素。
</code></pre>

<ul>
<li><h4 id="2-2-html结构">2.2 HTML结构</h4></li>

<li><h4 id="2-7-结构化块状元素">2.7 结构化块状元素</h4>

<ul>
<li>把文档结构化，这样浏览器才能解析出一个更好的文档视图</li>
<li>用块状元素来构造文档，有助于识别它的结构。</li>
<li>4种主要的结构化块状元素：<code>&lt;ol&gt;</code>,<code>&lt;ul&gt;</code>,<code>&lt;dl&gt;</code>和<code>table</code>。</li>
<li>9种支持结构化的元素：<code>&lt;li&gt;</code>,<code>&lt;dt&gt;</code>,<code>&lt;dd&gt;</code>,<code>&lt;caption&gt;</code>,<code>&lt;thead&gt;</code>,<code>&lt;tfoot&gt;</code>,<code>&lt;tbody&gt;</code>,<code>&lt;colgroup&gt;</code>,<code>&lt;col&gt;</code>。</li>
</ul></li>

<li><h4 id="2-8-终端块状元素">2.8 终端块状元素</h4>

<ul>
<li>需要从文档结构转移到内容</li>
<li><code>&lt;p&gt;</code>,<code>&lt;h1&gt;</code>,<code>&lt;blockquote&gt;</code>,<code>&lt;dt&gt;</code>,<code>&lt;address&gt;</code>和<code>&lt;caption&gt;</code>。</li>
<li>文档块状结构的终端节点。它们不能再包含块状元素。</li>
<li>它们只能包含文本和内联元素。</li>
<li>从结构上来说，它们是其他终端和结构化块状元素的兄弟节点，包含的都是与父元素主题相关的子话题。</li>
</ul></li>

<li><h4 id="2-9-多目标块状元素">2.9 多目标块状元素</h4>

<ul>
<li>需要通过在结构中嵌套结构或终止当前结构来自由扩展文档的结构。</li>
<li><code>&lt;div&gt;</code>,<code>&lt;li&gt;</code>,<code>&lt;dd&gt;</code>,<code>&lt;td&gt;</code>,<code>&lt;th&gt;</code>,<code>&lt;form&gt;</code>和<code>&lt;noscript&gt;</code>。</li>
<li>既可以包含块状元素也可以包含内容，但不能同时包含两种。</li>
<li>块状元素不应该为内联元素和文本的兄弟元素。</li>
<li>应当把内容放在块状元素之中</li>
<li>混合内容的时候会给内容套上一个匿名容器。</li>
</ul></li>

<li><h4 id="2-10-内联元素">2.10 内联元素</h4>

<ul>
<li>需要为文本赋予明确的含义，还想为文本添加样式以反映其内在的含义。</li>
<li>内容与结构相分离。</li>
<li>划分为4类：语义元素，排列顺序元素，可替代元素，控制元素。</li>
</ul></li>

<li><h4 id="2-11-类和id属性">2.11 类和ID属性</h4>

<ul>
<li>需要在具有相同元素中识别出某些元素。为一些元素赋予额外的语义和关联。</li>
<li>通常名字全部小写。</li>
</ul></li>

<li><h4 id="2-12-html-空白">2.12 HTML 空白</h4>

<ul>
<li>通过空白提高阅读性，但是不希望空白影响文档的解析。</li>
<li>浏览器会消除同一行中重复的空白。</li>
<li>在连续的空白字符中，第一个空白字符决定了被移除的空白位置与样式。</li>
</ul></li>
</ul>

<h3 id="第三章-css选择符与继承">第三章：CSS选择符与继承</h3>

<pre><code>- 主要是用于选择元素，以便添加样式。
</code></pre>

<ul>
<li><h4 id="3-2-类型-类和id选择符">3.2 类型，类和ID选择符</h4>

<ul>
<li>通过类型，类和ID选择符，从而赋予他们样式。</li>
<li>尽量用小写命名。</li>
</ul></li>

<li><h4 id="3-3-定位和群组选择符">3.3 定位和群组选择符</h4>

<ul>
<li>根据元素的位置把几个选择符组合起来以缩小选择的范围。</li>
<li>子选择符，后代选择符，群组选择符，兄弟选择符，首子选择符等。</li>
</ul></li>

<li><h4 id="3-4-属性选择符">3.4 属性选择符</h4>

<ul>
<li>依据元素中是否包含某属性，属性中是否包含某个值，属性中是否设定为某个值。</li>
<li>属性存在选择符，属性词汇选择符。</li>
</ul></li>

<li><h4 id="3-5-伪类元素选择符">3.5 伪类元素选择符</h4>

<ul>
<li>需要选择元素的第一个字母或第一行。</li>
<li><code>first-line</code>和<code>first-letter</code>。</li>
<li>使用范围：只与终端块状元素相搭配。对内联元素和结构化块状元素不起作用。</li>
</ul></li>

<li><h4 id="3-6-伪类选择符">3.6 伪类选择符</h4>

<ul>
<li>根据超链接的状态，来赋予样式。</li>
<li><code>a:link</code>:未被浏览的链接。</li>
<li><code>a:visited</code>:已被浏览的链接。</li>
<li><code>a:hover</code>:鼠标处于悬停状态的链接。</li>
<li><code>a:focus</code>:非IE中获得焦点的链接。</li>
<li><code>a:active</code>:获得在IE中焦点的链接。</li>
</ul></li>

<li><h4 id="3-7-子类选择符">3.7 子类选择符</h4>

<ul>
<li>需要用常见的规则为一类元素赋予样式。</li>
<li>你还想为这些元素划分为几个子类，并为他们赋予一定的样式从而覆盖掉基础样式。</li>
<li>e.g. <code>class.subclass.etc</code>。</li>
</ul></li>

<li><h4 id="3-8-继承">3.8 继承</h4>

<ul>
<li>需要为一个元素赋予样式，并让它的后代元素也应用同样的样式。</li>
<li><code>inherited</code> CSS提供的常量，可以给任何属性，该属性从它的父属性继承值。</li>
<li>模拟继承 <code>selector *{}</code>。</li>
</ul></li>

<li><h4 id="3-9-视觉继承">3.9 视觉继承</h4>

<ul>
<li>想让子元素的背景与父元素一样。</li>
<li>CSS自动把元素背景设为透明。</li>
<li>如果外边距或者定位引起兄弟元素的重叠，那么后面的兄弟会覆盖住前面的。</li>
<li>浏览器默认把子元素置于父元素的上面的透明层。除非设置了子元素的背景。</li>
</ul></li>
</ul>

<h3 id="第四章-盒模型">第四章：盒模型</h3>

<pre><code>- 定义了元素是如何被看做盒子来被解析的。
- 6种盒模型：内联，内联块状，块状，表格，绝对定位和浮动。
</code></pre>

<ul>
<li><h3 id="4-2-显示">4.2 显示</h3>

<ul>
<li>从根本上改变元素的解析方式。</li>
<li>用 <code>display</code> 改变元素的解析方式。</li>
<li><code>display:none</code> 阻止对元素的解析。</li>
<li><code>display:inline</code> 会对元素当作内联进行解析。</li>
<li><code>display:block</code> 或者 <code>display:list-item</code> 把元素当作块状或者列表项进行解析。</li>
<li><code>display:inline-block</code> 把内联元素当作嵌套在块状元素来解析。</li>
</ul></li>

<li><h3 id="4-3-盒模型">4.3 盒模型</h3>

<ul>
<li>想为元素的盒模型赋予样式。</li>
<li>定义了如下属性之间的关系：

<ul>
<li>display</li>
<li>width</li>
<li>height</li>
<li>padding</li>
<li>border</li>
<li>margin</li>
<li>background</li>
<li>overflow：溢出</li>
<li>visibility：决定元素是否可见</li>
</ul></li>
<li>6种主要的盒模型：内联，内联块状，块状，表格，浮动和绝对定位。</li>
</ul></li>

<li><h3 id="4-4-内联盒模型">4.4 内联盒模型</h3>

<ul>
<li>以内联的排列顺序进行解析的。</li>
<li><code>内联格式化环境</code>：当超过他们最近的终端块状祖先的宽度时，便换到新的一行。</li>
<li><code>width,height,overflow</code> 在内联上不起作用，因为他们总是与内容的宽度和高度相一致。</li>
<li>边框会覆盖掉临近行</li>
</ul></li>

<li><h3 id="4-5-内联块状盒模型">4.5 内联块状盒模型</h3>

<ul>
<li>想把一个内联块状元素赋予样式。</li>
<li>内联块状元素包括替代元素和按内联块状来显示的内联元素。</li>
<li>位于内联排列顺序中，只不过，它还加入了一些块状元素的属性：高度，宽度，外边距，边框，内边距</li>
</ul></li>

<li><h3 id="4-6-块状盒模型">4.6 块状盒模型</h3>

<ul>
<li>竖直方向从上至下排列。</li>
<li><code>width</code> : 默认值 auto 使得与父元素相一致。</li>
<li><code>height</code> : 默认值 auto  让元素的高度<code>包裹住</code>所有的子元素。</li>
<li><code>margin-left</code> : 如果设置了宽度，margin-left：auto 会让块状元素排列在父元素的<code>右边</code>。</li>
<li><code>margin-right</code> : 如果设置了宽度，margin-left：auto 会让块状元素排列在父元素的<code>左边</code>。</li>
</ul></li>

<li><h3 id="4-7-表格盒模型">4.7 表格盒模型</h3>

<ul>
<li>表格是含有很多单元格的块状盒模型。</li>
<li>表格有外边距，但是没有内边距。</li>
<li>单元格有内边距，但是没有外边距。</li>
</ul></li>

<li><h3 id="4-8-绝对定位盒模型">4.8 绝对定位盒模型</h3>

<ul>
<li>从正常的元素顺序中脱离，把它置于更高一层或者更低一层。</li>
<li>相对于最近的定位祖先，或者固定于视窗的某个位置。</li>
<li><code>z-index</code> 控制定位元素的层叠顺序。</li>
</ul></li>

<li><h3 id="4-9-浮动盒模型">4.9 浮动盒模型</h3>

<ul>
<li>使用 <code>float:left</code> 和 <code>float:right</code> 可让任何元素浮动起来。</li>
<li>浮动元素也脱离了正常的元素排列顺序。</li>
<li>被置于临近块状元素的边框和背景之上。这回缩小浮动元素的父元素。</li>
</ul></li>
</ul>

<h3 id="第五章-盒模型的尺寸">第五章：盒模型的尺寸</h3>

<ul>
<li><h3 id="5-2-宽度-width">5.2 宽度 : <em>width</em></h3>

<ul>
<li>除了内联元素，width对所有元素起作用。</li>
<li><code>width:auto</code>

<ul>
<li>水平包裹：内联，内联块状，浮动，表格和绝对定位（当left和right都为auto的时候）。</li>
<li>水平拉伸：块状，绝对定位（left和right都设置成一个值）。</li>
</ul></li>
</ul></li>

<li><h3 id="5-3-高度-height">5.3 高度 : <em>height</em></h3>

<ul>
<li>除了内联元素，height对所有的元素起作用。</li>
<li>浏览器会忽略静态内联元素的height，因为font和font-size绝对了它的文本宽度，从而决定了它的高度。</li>
<li>用height：100%可拉伸表格。</li>
</ul></li>

<li><h3 id="5-4-设定尺寸">5.4 设定尺寸</h3>

<ul>
<li>带有尺寸的元素必须把width和height设置成百分比。</li>
<li>width 和 height 用于定义元素的内盒。</li>
<li>表格是一个例外，它的width和height定义的是表格边框外的尺寸。包括了内边距和边框。</li>
<li>浮动元素设定了尺寸，会改变排列的顺序。</li>
<li>当静态块状元素设定了尺寸，它会改变排列的顺序。</li>
<li>当绝对定位元素被设定尺寸之后，它不会改变原来排序的顺序。也不会改变他的位置。</li>
</ul></li>

<li><h3 id="5-5-包裹">5.5 包裹</h3>

<ul>
<li>减小元素的宽度和高度从而使其包裹元素的内容。</li>
<li>被包裹的元素需要把元素的width和height设置成auto，从而自动调整和模型的大小。</li>
<li>块状元素不能水平包裹。</li>
</ul></li>

<li><h3 id="5-5-拉伸">5.5 拉伸</h3>

<ul>
<li>把元素高与块拉伸到与容器相同。</li>
<li>通过 auto 100% 对不同类型的盒模型进行拉伸。</li>
</ul></li>
</ul>

<h3 id="第六章-盒模型的属性">第六章：盒模型的属性</h3>

<ul>
<li><h3 id="6-2-外边距-margin">6.2 外边距 margin</h3>

<ul>
<li>负值会造成元素的重叠。</li>
<li>对内联元素 margin-top 和 margin-bottom 是被忽略的。</li>
<li>对于大多数元素来说 margin：auto 和 margin：0 是等价的。</li>
</ul></li>

<li><h3 id="6-3-边距-border">6.3 边距 border</h3>

<ul>
<li>运作机理与外边框基本一致。</li>
<li>竖直内联元素边框是不会自动增大行高的。</li>
</ul></li>

<li><h3 id="6-4-内边距-padding">6.4 内边距 padding</h3>

<ul>
<li>运作机理与边框基本一致。</li>
<li>竖直内联元素边框是不会自动增大行高的。</li>
<li>默认值为0</li>
</ul></li>

<li><h3 id="6-5-背景-background">6.5 背景 background</h3>

<ul>
<li>background

<ul>
<li>background-repeat:no-repeat  不平铺</li>
<li>background-repeat:repeat  平铺</li>
<li>background-repeat:repeat-x  x轴平铺</li>
<li>background-repeat:repeat-y  y轴平铺</li>
<li>background-position:水平坐标 竖直坐标</li>
</ul></li>
</ul></li>

<li><h3 id="6-6-溢出-overflow">6.6 溢出 overflow</h3>

<ul>
<li>常量：visible，hidden，scroll和auto。默认值为visible</li>
<li>CSS3 提供了 overflow-x，overflo-y。</li>
</ul></li>

<li><h3 id="6-7-可见性-visibility">6.7 可见性 visibility</h3>

<ul>
<li>把一个元素隐藏起来，并留下元素所占用的位置。</li>
<li>hidden，visible（默认值）</li>
</ul></li>

<li><h3 id="6-8-分页">6.8 分页</h3>

<ul>
<li>打印的时候插入分页符。</li>
<li>page-break-before 和 page-break-after</li>
<li>value：always and auto。</li>
</ul></li>
</ul>

<h3 id="第七章-定位模型">第七章：定位模型</h3>

<ul>
<li><h3 id="7-2-定位模型">7.2 定位模型</h3>

<ul>
<li>6种定位模型：

<ul>
<li>静态（static）：对内联，内联块状，块状和表格盒模型进行定位。</li>
<li>绝对和固定（absolute and fixed）：对盒模型进行定位。</li>
<li>浮动定位模型（）：能够对浮动盒模型进行定位。</li>
<li>相对定位模型（relative）：对绝对定位盒模型外的所有盒模型。</li>
<li>相对浮动定位模型（relative-float）：对浮动盒模型进行定位。</li>
</ul></li>
</ul></li>

<li><h3 id="7-3-定位">7.3 定位</h3>

<ul>
<li>static是position的默认值。不对元素进行定位。</li>
<li>relative：当前位置进行偏移。</li>
<li>absolute：定位最近的祖先进行偏移。</li>
<li>fixed：参照视窗进行偏移。</li>
</ul></li>

<li><h3 id="7-4-定位最近的祖先元素">7.4 定位最近的祖先元素</h3>

<ul>
<li>当一个元素没有定位祖先元素的时候，body就是他的祖先元素。</li>
<li>当你对一个自含式元素进行定位时，它的后代元素也会跟随着它移动。</li>
<li>弱点是元素必须被设定大小。</li>
</ul></li>

<li><h3 id="7-5-堆叠环境">7.5 堆叠环境</h3>

<ul>
<li>对元素堆叠顺序进行控制</li>
<li>z-index 值为auto或者赋值给非定位元素时，不参赛堆叠环境。</li>
<li>每种局部堆叠环境都被赋予了一个内部的堆叠等级：0，其后代都是相对于它的。</li>
<li>它是相对于被赋予了z-index值的定位最近的祖先元素而言的。</li>
</ul></li>

<li><h3 id="7-6-原子化">7.6 原子化</h3>

<ul>
<li>想让文本和内联内容作为块状元素的整体一起被解析，这样，当其他块状元素把它覆盖的时候，它的内容也被覆盖。</li>
<li>定位元素就是原子化的。意味着没有外部元素能够插在它的静态子孙元素，内联内容和背景之间。</li>
</ul></li>

<li><h3 id="7-7-静态定位">7.7 静态定位</h3>

<ul>
<li>position：static应用到元素上，可以按照正常的顺序进行定位。这是默认设置。</li>
<li>当内联元素内容超出了容器的宽度时，浏览器会自动把它们移到新的一行。</li>
</ul></li>

<li><h3 id="7-8-绝对定位">7.8 绝对定位</h3>

<ul>
<li>想把元素从正常的排列顺序中移除，并把它移到自己的定位层。</li>
<li>position：absolute 把任何元素当作绝对盒模型解析。</li>
<li>widht 和 height 设置大小，百分比相对最近的盒模型定位吗，而不是他的父元素。</li>
</ul></li>

<li><h3 id="7-9-固定定位">7.9 固定定位</h3>

<ul>
<li>当视窗滚动时，你不想它随之移动。</li>
<li>position：fixed 相对视窗而不是相对父元素</li>
</ul></li>

<li><h3 id="7-10-相对定位">7.10 相对定位</h3>

<ul>
<li>控制元素在正常排列位置上的堆叠顺序。</li>
<li>position：relative 使用z-index</li>
</ul></li>

<li><h3 id="7-11-浮动和清除">7.11 浮动和清除</h3>

<ul>
<li>从正常排序中清除，并让他们位于父元素的左侧或右侧。</li>
<li>float：left|right</li>
</ul></li>

<li><h3 id="7-11-相对浮动">7.11 相对浮动</h3>

<ul>
<li>想在不影响其他元素定位的前提下，把浮动元素从现有的位置上偏移，还有堆叠顺序。</li>
<li>加了position：relative 保留原来的元素位置，用 left 和 top 做一定的偏移。</li>
</ul></li>
</ul>

<h3 id="第八章-定位-缩进-偏移和对齐">第八章：定位：缩进，偏移和对齐。</h3>

<ul>
<li><h3 id="8-2-缩进">8.2 缩进</h3>

<ul>
<li>把元素拉伸至元素的四边，然后再对它自己的边进行偏移。向内缩进减少元素的尺寸。</li>
<li>向外缩进扩大元素的尺寸。</li>
<li>每一边都可独立的缩进和外凸。</li>
<li>先对齐后缩进。</li>
<li>margin  正的缩进 负的外凸。</li>
</ul></li>

<li><h3 id="8-3-静态元素的偏移">8.3 静态元素的偏移</h3>

<ul>
<li>对前面元素的结束位置开始计算。</li>
<li>正值向右移动，负值向左移动。</li>
</ul></li>

<li><h3 id="8-4-静态表格的偏移和缩放">8.4 静态表格的偏移和缩放</h3></li>

<li><h3 id="8-5-浮动元素的偏移">8.5 浮动元素的偏移</h3></li>

<li><h3 id="8-6-绝对元素和固定元素的偏移-position-absolute-fixed">8.6 绝对元素和固定元素的偏移 position:absolute fixed</h3></li>

<li><h3 id="8-7-相对元素的偏移-position-relative">8.7 相对元素的偏移 position:relative</h3>

<ul>
<li>通过left right top bottom 移动位置而不影响其他元素位置顺序。</li>
</ul></li>

<li><h3 id="8-8-静态内联元素的对齐">8.8 静态内联元素的对齐</h3>

<ul>
<li>position：static</li>
<li>text-align ： justify 两端对齐</li>
<li>vitical-align ：value 基于基准 向上向下偏移value</li>
</ul></li>

<li><h3 id="8-9-静态块状元素的对齐与偏移">8.9 静态块状元素的对齐与偏移</h3>

<ul>
<li>margin-right 和 margin-left 都为auto时 中心对齐。</li>
</ul></li>
</ul>

<h3 id="第九章-定位-进阶">第九章：定位：进阶</h3>

<ul>
<li><h3 id="左右对齐">左右对齐</h3>

<ul>
<li>方法：<code>text-align：left; margin-left：0;  margin-right：auto</code>。适用模型：

<ul>
<li>sized-static block</li>
<li>stretched-static block</li>
<li>sized-absolute element</li>
<li>shrinkwrapped-absolute element</li>
<li>stretched absolute element</li>
</ul></li>
</ul></li>

<li><h3 id="左右偏移">左右偏移</h3>

<ul>
<li></li>
</ul></li>
</ul>

  </div>
</div>
<div class="container has-text-centered">
    
</div>

<div class="container has-text-centered">
  
</div>
<section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


